import React, { FC, 
    // useState, 
    useEffect } from "react";
// import {produce} from 'immer'
import QuestionCard from "../../components/QuestionCard.tsx";
import { useSearchParams } from "react-router-dom";
import { useTitle } from "ahooks";
import { Typography,Empty,Spin,
    // Pagination 
} from "antd";
import ListSearch from '../../components/ListSearch.tsx'
import useLoadQuestionListData from '../../hooks/useLoadQuestionListData.ts'
import SelfPagination from '../../components/SelfPagination.tsx'
import "./common.css";
// 组件是一个函数（执行返回 JSX 片段），组件初次渲染执行这个函数
// 任何 state 更新，都会触发组件的更新（重新执行函数）
const { Title } = Typography;
const Star: FC = () => {
    useTitle("小董问卷-星标问卷");
    const [searchParams] = useSearchParams();
    console.log("keyword", searchParams.get("keyword"));

    useEffect(() => {
        return () => {};
    }, []); // 无依赖，组件初次渲染时执行
    // 1、本地假数据模式
    // const [count, setCount] = useState(0)
    // const [questionList, setQuestionList] = useState([
    //     {id: "q1",title: "问卷5",isPublished: false,isStar: true,answerCount: 10,createAt: "2025-04-10",},
    //     {id: "q2",title: "问卷6",isPublished: true,isStar: false,answerCount: 11,createAt: "2025-05-11",},
    //     {id: "q3",title: "问卷7",isPublished: false,isStar: false,answerCount: 12,createAt: "2025-06-12",},
    //     {id: "q4",title: "问卷8",isPublished: true,isStar: true,answerCount: 13,createAt: "2025-07-13",},
    // ]);

    // useEffect(() => {
    //   console.log('question list changed')
    // }, [questionList])

    // 2、hooks模式
    const { data = {}, loading } = useLoadQuestionListData({ isStar: true })
    const { list = [], total = 0 } = data 
    console.log('data',data)
    return (
        <div>
            <div className="ListHeader">
                <div className="left">
                    <Title level={3}>我的问卷</Title>
                </div>
                <div className="right">
                    <Title level={3}><ListSearch /></Title>
                </div>
            </div>
            <div className="ListContent">
                {loading && (
                    <div style={{textAlign:'center'}}><Spin /></div>
                )}
                {!loading && list.length === 0 && <Empty description="暂无数据" />}
                {!loading && list.length > 0 && list.map((question:any) => {
                    const { id, title, isPublished, isStar, answerCount, createdAt } = question;
                    return (
                    <QuestionCard
                        key={id}
                        id={id}
                        title={title}
                        isPublished={isPublished}
                        isStar={isStar}
                        answerCount={answerCount}
                        createdAt={createdAt}
                    />
                    );
                })}
            </div>
            <div className="ListFooter">
                <SelfPagination total={total} />
            </div>
        </div>
    );
};

export default Star;
